<template>
	<div>
		<div class="box">
			<div class="title">
				<span class="tag"></span>
				租金调整-其他
			</div>
			<el-form
				v-if="formData.subsequentData"
				:model="formData.subsequentData"
				ref="form"
				:hide-required-asterisk="true"
				size="normal">
				<ATable
					model="feeList"
					v-model="formData.subsequentData.feeList"
					:config="tableColumns"
					:header-cell-class-name="setHeaderCellName"
					:state="state">
					<template #handler="scope">
						<div>
							<el-button
								type="text"
								@click="
									remove_feeList(scope.$index, scope.row)
								">
								删除
							</el-button>
						</div>
					</template>
				</ATable>
			</el-form>

			<el-button
				v-if="state !== 'disabled' && state !== 'readonly'"
				class="btn"
				plain
				type="primary"
				size="default"
				icon="el-icon-plus">
				增加一行
			</el-button>
		</div>
	</div>
</template>

<script>
	import ATable from '@/components/A/A-form/table/index.vue';
	export default {
		name: '',
		components: { ATable },
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				},
			},
			state: {
				required: false,
			},
		},
		dicts: ['quota_fee'],
		data() {
			return {};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			tableColumns() {
				return [
					{
						label: '选择',
						type: 'empty',
						slot: 'handler',
					},
					{
						label: '费用项',
						prop: 'feeKey',
						type: 'select',
						dict: {
							list: this.quotaFeeList,
						},
						rules: true,
						prototype: {
							allowCreate: true,
						},
						on: {
							change: ({ val, row, item }) => {
								row.feeVal = item.value.feeKey ?? val.value;
							},
						},
					},
					{
						label: '次数',
						prop: 'feeCount',
						type: 'input_number',
						prototype: {
							min: 1,
							stepStrictly: true,
						},
						rules: true,
					},
					{
						label: '费用金额',
						prop: 'feeAmount',
						type: 'price',
						prototype: { min: 1, step: 0.01 },
						rules: true,
					},
					{
						label: '备注',
						prop: 'remark',
						type: 'textarea',
						prototype: {
							minRows: 1,
							maxRows: 1,
						},
					},
				];
			},
			quotaFeeList() {
				return this.dict.type.quota_fee;
			},
		},
		created() {},
		mounted() {},
		methods: {
			push_feeList() {
				if (Array.isArray(formData.subsequentData.feeList) == false) {
					this.$set(this.formData.subsequentData, 'feeList', []);
				}
				this.formData.subsequentData.feeList.push({
					feeKey: undefined,
					feeVal: undefined,
					feeCount: undefined,
					feeAmount: undefined,
					remark: undefined,
				});
			},
			remove_feeList(index, row) {
				let label = this.quotaFeeList.find(
					item => item.value == row.feeKey,
				)?.label;
				this.$confirm(
					`此操作将删除 ${
						label ? label + ' 费用项' : '该费用项'
					}, 是否继续?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					},
				)
					.then(() => {
						this.formData.subsequentData.feeList.splice(index, 1);
					})
					.catch(() => {});
			},
			setHeaderCellName({ row, column, rowIndex, columnIndex }) {
				if (this.state == 'readonly') {
					return '';
				}
				if (
					columnIndex !== 0 &&
					columnIndex !== 4 &&
					columnIndex !== undefined
				) {
					return 'ruleHeaderCell';
				}
			},
			setDefaultData() {
				this.formData.subsequentData.feeList =
					this.formData.previousData.feeList;
			},
		},
		beforeDestroy() {
			this.setDefaultData();
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-top: 15px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
	.btn {
		margin-top: 15px;
		width: 100%;
	}
</style>
